<template>
  <div class="spot-big">
    <swiper :options="swiperOption" class="border-bottom">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <ul>
          <li v-for="item of page" :key="item.id">
            <a href="#">
              <div class="spot-img">
                <img :src="item.imgUrl">
              </div>
              <div class="spot-text">{{item.desc}}</div>
            </a>
          </li>
        </ul>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div>
      <div class="spot-foot-left">
        <h2>
          <span class="iconfont">&#xe606;</span>
          定位失败
        </h2>
      </div>
      <div class="spot-foot-right">
        <a href="#">
          <span class="iconfont">&#xe844;</span>
          必游榜单
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSpot',
  props: {
    list: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    pages () {
      let arr = []
      this.list.forEach((obj, index) => {
        let page = Math.floor(index / 8)
        if (!arr[page]) {
          arr[page] = []
        }
        arr[page].push(obj)
      })
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
    .spot-big >>> .swiper-container
      padding-bottom: 50%;
      height: 0;
    ul
      width 100%
      height 4rem
      overflow hidden
    .spot-big
      height 0
      padding-bottom 51.2%
      li
       float left
       width 25%
       height 1.5rem
       text-align center
       margin-top 0.2rem
       .spot-img
        width 1.1rem
        height 1.1rem
        margin 0 auto
       .spot-img
        img
         width 100%
         height 100%
       .spot-text
         color black
         margin-top 0.1rem
    .spot-foot-left
      float left
      width 50%
      text-align center
      border-right 0.02rem solid #E4E7EA
    .spot-foot-left
      h2
        margin 0.4rem 0
    .spot-foot-right
      float left
      width 50%
      text-align center
    .spot-foot-right
      a
        color black
        display inline-block
        margin 0.4rem 0
</style>
